<template>
  <div>
    <!-- <h4> 这里显示查询的大学信息</h4> -->

    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    >
      <div ref="box">

        <div
          v-for="item in college_list"
          :key="item.school_website"
          class="college"
        >
          <span>{{ item.school_province }}</span> 省/市 - - <span>{{ item.school_city }}</span> 市/县 - - <span>{{ item.school_level }}</span>
          <a :href="item.school_website">{{ item.school_name }}</a>
        </div>
        
      </div>

    </van-pull-refresh>
  </div>
</template>

<script>

// import store from '../store/index';

import Vue from 'vue';

import {
  Tag, Toast, Lazyload, PullRefresh,
} from 'vant';

import { log } from 'util';

Vue.use(Tag).use(Toast).use(Lazyload).use(PullRefresh);


export default {

  data() {
    return {
      college_list: [],
      isLoading: false,
      difference: 0,
      num: 10,
    };
  },
  watch: {
    difference: {
      handler(newval) {
        // console.log(newval)
        if (newval < 0) {
          this.num += 5;
          if (this.num <= 50) {
            Toast('正在加载中。。');
            this.search();
          } else {
            Toast('无法加载更多了，亲～～～');
          }
        }
      },
    },
  },
  // store,

  created() {
    this.search();
  },
  mounted() {
    window.addEventListener('scroll', this.diff);
  },
  methods: {
    search() {
      // console.log('---------22222----------')
      this.$axios.get(`http://hd215.api.yesapi.cn/?&s=App.Common_University.Search&app_key=FB47904BC3C79E2D81F3DE6DA53316FF&top_num=${this.num}&school_name=${this.$store.state.search_value}`).then((res) => {
        if (res.data.ret === 200) {
          this.college_list = res.data.data.schools;
        }
      });
    },
    diff() {
      console.log(this.$refs.box);
      this.difference = this.$refs.box.getBoundingClientRect().bottom - window.innerHeight;
    },
    onRefresh() {
      this.num = 10;
      this.college_list = [];
      this.search();
      this.isLoading = false;
      this.$toast('刷新成功');
    },
  },

};
</script>

<style lang="less" scoped>


.college{
    width: 85%;
    padding: 6px 12px;
    font-size: 14px;
    color: #999;
    background-color: #eee;
    border-radius: 5px;
    margin: 5px auto;
    line-height: 26px;
    span{
        color: #444;
    }
    a{
        display: block;
    }
}

</style>
